<template>
	<ls-skeleton :loading="loading">
		
		<view class="wrapper flex-row">
			<view class="cusInfo">
				<view class="info">
					<view class="text-tips">客户信息</view>
					<view class="text">车主：{{detail.carLicense}}</view>
					<view class="text">车型：{{detail.modelName}} {{detail.carYear}}</view>
				</view>
				<view class="info">
					<view class="text-tips">客户信息</view>
					<view class="text">产品：{{detail.productName}}</view>
					<view class="text">型号：{{detail.specifications}}</view>
					<!-- <view class="text">位置：近光</view> -->
					<view class="text">安装时间：{{detail.buyTime}}</view>
				</view>
			</view>
			<view class="picBox flex-row row-between-wrapper" v-if="detail.imageList.lenght">
				<view class="pic flex-1" v-for="(item, index) in detail.imageList" :key="index">
					<image mode="widthFix" :src="item.oriName"></image>
				</view>
			</view>
			<view class="storeBox">
				<view class="text-tips">安装门店</view>
				<view class="text">安装门店：{{detail.storeName}}</view>
				<view class="text">联系人：{{detail.userName}}</view>
				<view class="text">电话：{{detail.userPhone}}</view>
			</view>
			<view class="warranty">
				<view class="text-tips">质保时间</view>
				<view class="text text-large text-center">{{detail.buyDates}}天</view>
				<view class="text text-center">保修至{{detail.buyTimeEnd}}</view>
			</view>
			<view class="qrcode">
				<view class="text-tips">灯体二维码</view>
				<view class="flex-row row-around">
					<view class="pic flex-row row-column row-middle" v-for="(item, index) in detail.bindList" :key="index">
						<canvas :canvas-id="item.bindId" class="canvas">{{drawQRcode(item.bindId, item.xflowCode)}}</canvas>
						<text>{{item.xflowCode}}</text>
					</view>
				</view>
			</view>
			<view class="scanBox" v-if="type == 0">
				<view class="text-tips">新灯扫码</view>
				<view class="flex-row row-column row-middle row-center">
					<view class="scan">
						<u-icon name="scan" color="#26c68a" size="200"></u-icon>
					</view>
					<view class="btn" @click="newScanCode">请扫描灯体上二维码</view>
					<view class="tip">如果灯体二维码扫不出来，联系车灯师客服，提供数字码</view>
					<view class="input">
						<u--input placeholder="请输入数字唯一码" border="surround" :customStyle="'padding: 20rpx'"
							v-model="newCode"></u--input>
					</view>
					<view class="btn-confirm" @click="finishService">确认</view>
				</view>
			</view>
			<!-- 售后记录 -->
			<view class="saleBox">
				<view class="text-tips">售后记录</view>
				<view class="" v-for="(item, index) in detail.serviceList" :key="index">
					<view class="text">售后时间：{{$util.dateFormat(item.callTime)}}</view>
					<view class="text">售后店铺：{{item.storeName}}</view>
					<view class="text">售后产品：{{item.storeName}}</view>
					<view class="oldQrcode flex-row">
						<view class="pd-r-20">原灯二维码</view>
						<canvas :canvas-id="item.serviceId" class="pic">{{drawQRcode(item.serviceId, item.flowCode)}}</canvas>
					</view>
				</view>
				
			</view>
			<!-- 保修 -->
			<view class="termBox">
				<view class="text-tips">保修条款</view>
				<view class="text">本产品属于紧密电子产品。产品自安装之日开始保修18个月，终身维护。</view>
			</view>
			<view class="foot flex-row row-center" v-if="type == 1">
				<view class="footer-btn" @click="backBtn">确认</view>
			</view>
		</view>
	</ls-skeleton>
</template>


<script>
	import {
		toLogin,
	} from '@/libs/login.js';
	import UQrcode from '@/libs/uqrcode.js';
	import {
		wxCodeDetail
	} from '@/api/common.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				newCode: '',
				oldCode: '',
				detail: {},
				loading: true,
				type: 0,
			}

		},
		computed: mapGetters(['isLogin', 'uid']),

		onLoad(options) {
			let that = this;
			if (this.isLogin == false) {
				toLogin();
			}
			that.oldCode = options.oldCode;
			that.type = options.type;
			that.getDetail();
		},

		onShow() {

		},

		methods: {
			/**
			 * @param {Object} el
			 * @param {Object} val
			 * 绘画QRCODE
			 */
			drawQRcode(el, val) {
				UQrcode.make({
					canvasId: el,   //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
					componentInstance: this,
					text: val,  //需要转成二维码的内容是后端传过来的，我这里是onLoad传过来的，根                              据自己的需要
					size: 110,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					typeNumber: 5,
					errorCorrectLevel: UQrcode.errorCorrectLevel.H,
					success: res => {
					}
				})
			},	
			/**
			 * 获取详情
			 */
			getDetail() {
				let that = this;
				wxCodeDetail({
					flowCode: that.oldCode,
					userInfoId: that.uid
					// userInfoId: 1492
					// userInfoId: 695
				}).then(res => {
					that.detail = res.value;
					that.loading = false;
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				})
			},

			/**
			 * 确认
			 */
			confirm() {

			},

			newScanCode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						if (res.result) {
							this.newCode = res.result;
						} else {
							return this.$util.Tips({
								title: '请重新扫描'
							})
						}
					},
					fail: (res) => {
						this.$util.Tips({
							title: '未识别到二维码'
						})
					}
				})
			},

			finishService() {
				let that = this;
				if (!that.newCode) {
					return that.$util.Tips({
						title: "请扫描新灯体二维码"
					})
				}
				that.$request.get('saleBack/finishService', {
					userInfoId: that.uid,
					oldCode1: that.oldCode,
					newCode1: that.newCode
				}).then(res => {
					that.$util.Tips({
						title: '成功'
					}, {
						tab: 1,
						url: '/pages/user/index'
					})
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},
			
			backBtn() {
				let that = this;
				that.$util.Tips({
				}, {
					tab: 3,
					url: 1
				});
			}
		}
	}
</script>

<style>
	page {
		background: #f5f5f5;
	}

	.wrapper {
		position: relative;
		margin: 15rpx 25rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	.wrapper .cusInfo {
		border-radius: 20rpx;
		background-color: #fff;
		font-size: 28rpx;
		color: #737373;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		line-height: 1.5;
	}

	.wrapper .cusInfo .info:nth-child(1) {
		padding-bottom: 20rpx;
	}

	.wrapper .cusInfo .info:nth-child(2) {
		padding-top: 20rpx;
	}

	.wrapper .cusInfo .info~.info {
		border-top: 1px dashed #c3c6cd;
	}

	.wrapper .cusInfo .info .text-tips {
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #333;
	}

	.wrapper .picBox {
		margin-top: 20rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		width: 100%;
		box-sizing: border-box;
	}

	.wrapper .picBox .pic {
		padding: 8rpx;
		margin: 0 8rpx;
		width: 300rpx;
		border: 2rpx dashed #26c68a;
		border-radius: 20rpx;
	}

	.flex-1 {
		flex: 1;
	}

	.text-center {
		text-align: center;
	}

	.wrapper .picBox .pic image {
		height: auto;
		width: 100%;
		border-radius: 20rpx;
	}

	.wrapper .storeBox,
	.wrapper .warranty,
	.wrapper .scanBox,
	.wrapper .qrcode,
	.wrapper .saleBox,
	.wrapper .termBox {
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		font-size: 28rpx;
		color: #737373;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		line-height: 1.5;
	}

	.wrapper .storeBox .text-tips,
	.wrapper .warranty .text-tips,
	.wrapper .scanBox .text-tips,
	.wrapper .qrcode .text-tips,
	.wrapper .saleBox .text-tips,
	.wrapper .termBox .text-tips {
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #333;
	}

	.wrapper .warranty .text-large {
		font-weight: bold;
		font-size: 60rpx;
		color: #26c68a;
	}

	/* .wrapper .qrcode .pic image {
		width: 220rpx;
		height: 220rpx;
	} */
	.wrapper .qrcode .pic .canvas {
		width: 220rpx;
		height: 220rpx;
		margin: 20rpx;
	}

	.wrapper .scanBox .scan {
		margin-bottom: 20rpx;
	}

	.wrapper .scanBox .tip {
		color: #737373;
		font-size: 24rpx;
		margin: 50rpx 0 40rpx;
	}

	.wrapper .scanBox .btn {
		padding: 25rpx;
		background-color: #26c68a;
		width: 70%;
		/* height: 40rpx;
		line-height: 40rpx; */
		color: #fff;
		text-align: center;
		font-size: 32rpx;
	}

	.wrapper .scanBox .input {
		width: 80%;
		box-sizing: border-box;
	}

	.wrapper .scanBox .btn-confirm {
		border: 1px solid #c3c6cd;
		color: #737373;
		padding: 20rpx 40rpx;
		margin-top: 50rpx;
		border-radius: 6rpx;
	}
	
	.wrapper .saleBox .oldQrcode {
		padding-top: 20rpx;
	}
	
	.wrapper .saleBox .oldQrcode .pic {
		width: 220rpx;
		height: 220rpx;
	}
	
	.pd-r-20 {
		padding-right: 20rpx;
	}
	
	.foot {
		width: 100%;
	}
	
	.footer-btn {
		width: 300rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #fff;
		background-color: #26c68a;
		height: 40rpx;
		text-align: center;
	}
</style>